<template>
	<view class="content">
		<view class="tabber_box flexs1">
			<view class="tabber_item" @click='clickbtn(0)' :class="{'chooseactive':typeindex==0}">
				<view>所有记录</view>
				<view class="title_line" v-show="typeindex==0"></view>
			</view>
			<view class="tabber_item" @click='clickbtn(2)' :class="{'chooseactive':typeindex==2}">
				<view>已纠正</view>
				<view class="title_line" v-show="typeindex==2"></view>
			</view>
			<view class="tabber_item" @click='clickbtn(1)' :class="{'chooseactive':typeindex==1}">
				<view>未纠正</view>
				<view class="title_line" v-show="typeindex==1"></view>
			</view>
			
		</view>
		<scroll-view class="list_box" scroll-y="true" lower-threshold="50" @scrolltolower="AddPage">
			<!-- 所有记录 -->
			<block v-if="typeindex==0">
				<view class="none_msg" v-if="InfoList.length==0">
					<image src="../../static/image/wdsc_img_k@2x.png" mode=""></image>
					<view class="none_title">暂无信息</view>
				</view>
				<view class="test_item" v-for="(item,index) in InfoList" :key="index" v-else>
					<view class="test_top">
						<view class="test_top_l">题目：{{item.question.name}}  </view>
						<!-- <view class="test_top_r"><image src="../../static/image/ly_ico_sc@2x.png" mode=""></image></view> -->
					</view>
					<view class="test_sel_item" v-for="(items,indexs) in item.answer_list" :key="indexs">
						<view class="test_sel_index"  :class="{'testactive':testindex==indexs}">{{indexs}}</view>
						<view class="test_sel_con">{{items}}</view>
					</view>
					<view class="test_btm_box jl" v-show="item.status==2">
						<!-- 已纠正 -->
							<!-- 已纠正 -->
							<view class="test_btm_item">
								<view class="btm_item_t">
									<view class="btm_item_t_1">已纠正</view>
									<view class="btm_item_t_r">{{item.updatetime}}</view>
								</view>
								<view class="btm_item_content">{{item.correction}}</view>
							</view>
							<!-- 未纠正 -->
							<view class="test_btm_item btm_jl">
								<view class="btm_item_t">
									<view class="btm_item_t_1">错误内容</view>
									<view class="btm_item_t_r">{{item.createtime}}</view>
								</view>
								<view class="btm_item_content">{{item.content}}</view>
								<view class="cu_sel_item_box">
									<view class="cu_sel_active" @click="chooseitem(index)">
									{{item.item.name}}</view>
								</view>
							</view>
					</view>
					<view class="test_btm_box jl" v-show="item.status==1">
						<!-- 未纠正 -->
						<view class="test_btm_item">
							<view class="btm_item_t">
								<view class="btm_item_t_1">未纠正</view>
								<view class="btm_item_t_r">{{item.createtime}}</view>
							</view>
							<view class="btm_item_content">{{item.content}}</view>
							<view class="cu_sel_item_box">
								<view class="cu_sel_active">
								 {{item.item.name}}</view>
							</view>
						</view>
						
					</view>
				</view>
			</block>
			<!-- 已纠正 -->
			<block v-if="typeindex==2">
				<view class="none_msg" v-if="InfoList.length==0">
					<image src="../../static/image/wdsc_img_k@2x.png" mode=""></image>
					<view class="none_title">暂无信息</view>
				</view>
				<view class="test_item" v-for="(item,index) in InfoList" :key="index" v-else>
					<view class="test_top">
						<view class="test_top_l">题目：{{item.question.name}}  </view>
						<!-- <view class="test_top_r"><image src="../../static/image/ly_ico_sc@2x.png" mode=""></image></view> -->
					</view>
					<view class="test_sel_item" v-for="(items,indexs) in item.answer_list" :key="indexs">
						<view class="test_sel_index"  :class="{'testactive':testindex==indexs}">{{indexs}}</view>
						<view class="test_sel_con">{{items}}</view>
					</view>
					<view class="test_btm_box jl">
						<!-- 已纠正 -->
						<view class="test_btm_item">
							<view class="btm_item_t">
								<view class="btm_item_t_1">已纠正</view>
								<view class="btm_item_t_r">{{item.updatetime}}</view>
							</view>
							<view class="btm_item_content">{{item.correction}}</view>
						</view>
						<!-- 未纠正 -->
						<view class="test_btm_item btm_jl">
							<view class="btm_item_t">
								<view class="btm_item_t_1">错误内容</view>
								<view class="btm_item_t_r">{{item.createtime}}</view>
							</view>
							<view class="btm_item_content">{{item.content}}</view>
							<view class="cu_sel_item_box">
								<view class="cu_sel_active" @click="chooseitem(index)">
								{{item.item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 未纠正 -->
			<block v-if="typeindex==1">
				<view class="none_msg" v-if="InfoList.length==0">
					<image src="../../static/image/wdsc_img_k@2x.png" mode=""></image>
					<view class="none_title">暂无信息</view>
				</view>
				<view class="test_item" v-for="(item,index) in InfoList" :key="index" v-else>
					<view class="test_top">
						<view class="test_top_l">题目：{{item.question.name}}  </view>
						<!-- <view class="test_top_r"><image src="../../static/image/ly_ico_sc@2x.png" mode=""></image></view> -->
					</view>
					<view class="test_sel_item" v-for="(items,indexs) in item.answer_list" :key="indexs">
						<view class="test_sel_index"  :class="{'testactive':testindex==indexs}">{{indexs}}</view>
						<view class="test_sel_con">{{items}}</view>
					</view>
					<view class="test_btm_box jl">
						<!-- 未纠正 -->
						<view class="test_btm_item">
							<view class="btm_item_t">
								<view class="btm_item_t_1">未纠正</view>
								<view class="btm_item_t_r">{{item.createtime}}</view>
							</view>
							<view class="btm_item_content">{{item.content}}</view>
							<view class="cu_sel_item_box">
								<view class="cu_sel_active" @click="chooseitem(index)">
								  {{item.item.name}}</view>
							</view>
						</view>
						
					</view>
				</view>
				
			</block>
		</scroll-view>
		<!-- 删除弹窗 -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu_title">
					<view></view>
					<view class="text-bold cu-item-title1">提示</view>
					<view class="action1" @click="hideModal">
						<image src="../../static/image/ico_ts_gb@2x.png" mode=""></image>
					</view>
				</view>
				<view class="padding_xl">
					<view class="cu_tip">您确定删除该订单吗？</view>
				</view>
				<view class="button">
					<view class="cu_btn">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {correctlist} from '@/api/personal.js'
	export default {
		data() {
			return {
				typeindex: 0,
				modalName1:null,
				product_star:5,
				modalName:null,
				seltype:1,
				testindex:0,
				InfoList:[],
				page:1,
				pageSize:10
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			clickbtn(val) {
				this.typeindex = val
				console.log(this.typeindex)
				this.getInfo()
			},
			chooseTest(val){
				this.testindex=val
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			// 课程评价
			chooseType(val){
				this.seltype=val
			},
			getInfo(){
				var obj = {
					type:this.typeindex,
					page:this.page,
					limit:this.pageSize
				};
				correctlist(obj).then(res => {
					if (res.code == 1) {
						this.InfoList=res.data.data
					}
				});
			},
			AddPage(){
				this.pageSize=this.pageSize+10
				this.getInfo()
			},
			
			
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.tabber_box {
		width: 100%;
		height: 80rpx;
		margin: auto;
		background-color: #FFFFFF;
		padding: 0 100rpx;
		/* padding-left: 20rpx; */
		position: fixed;
		top: 85rpx;
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tabber_item {
		/* width: 25%; */
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		flex-shrink: 0;
	}

	.chooseactive {
		/* width: 25%; */
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.title_line {
		width: 60rpx;
		height: 4rpx;
		background: #FFDD47;
		border-radius: 2rpx;
		margin-top: 5rpx;
	}

	.list_box {
		width: 100%;
		/* height: auto; */
		/* #ifdef APP-PLUS */
		height: 100%;
		/* #endif */
		height: calc(100% - 100rpx);
		margin-top: 100rpx;
		padding-bottom: 30rpx;
		overflow-y: auto;
	}
	.list_item{
		width: 100%;
		height: 290rpx;
		background-color: #FFFFFF;
		padding: 0rpx 30rpx;
		margin-top: 20rpx;
	}
	.list_item1{
		width: 100%;
		height: 240rpx;
		background-color: #FFFFFF;
		padding: 0rpx 30rpx;
		margin-top: 20rpx;
	}
	.list_top{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.list_top_l{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.list_top_r{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF3B30;
	}
	.list_content{
		width: 100%;
		height: 190rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #F5F5F5;
	}
	.list_content1{
		width: 100%;
		height: 140rpx;
		padding-top: 30rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}
	.list_content_l image{
		width: 196rpx;
		height: 130rpx;
		background: #F7F5F6;
		border-radius: 10rpx;
	}
	.list_content_r{
		width: 68%;
		height: 130rpx;
	}
	.list_content_title{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.list_content_money{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF3B30;
	}
	.list_content_time{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-top: 10rpx;
	}
	.list_btm{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.list_btn{
		width: 120rpx;
		height: 40rpx;
		border: 1rpx solid #CCCCCC;
		border-radius: 4rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.list_btn1{
		width: 120rpx;
		height: 40rpx;
		background: #FFDD47;
		border-radius: 4rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 40rpx;
	}
	/* 试题 */
	.test_item{
		width: 100%;
		height: auto;
		padding: 30rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.test_top_r image{
	    width: 26rpx;
		height: 26rpx;
	}
	.test_top{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.test_top_l{
		width: 80%;
		height: auto;
	}
	.test_sel_item{
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
	}
	.test_sel_index{
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #CCCCCC;
		border-radius: 50%;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 40rpx;
	}
	.testactive{
		width: 36rpx;
		height: 36rpx;
		border: none !important;
		background: #FFDD47;
		border-radius: 50%;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 40rpx;
	}
	.test_btm{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.test_btm_box{
		width: 100%;
		height: auto;
		padding-top: 30rpx;
		border-top: 1rpx solid #F5F5F5;
	}
	.test_btm_item{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 16rpx 0px rgba(51, 46, 16, 0.13);
		border-radius: 10rpx;
		padding: 0 20rpx;
		padding-bottom: 10rpx;
	}
	.btm_item_t{
		height: 75rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.btm_item_content{
		width: 100%;
		height: auto;
		padding-bottom: 20rpx;
	}
	.btm_item_t_1{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF3B30;
	}
	.btm_item_t_r{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.cu_sel_item_box{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.cu_sel_item{
		width: 150rpx;
		height: 44rpx;
		border: 1rpx solid #CCCCCC;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.cu_sel_active{
		width: auto;
		height: 44rpx;
		padding: 0 20rpx;
		background: #FFFAE6;
		border: 1rpx solid #FFDD47;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.btm_jl{
		margin-top: 20rpx;
	}
    .jl{
		margin-top: 15rpx;
	}
	/* 咨讯 */
	.news_item{
		width: 100%;
		height: 290rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}
	.news_top{
		width: 100%;
		height: 190rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.list_seenum image{
		width: 27rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}
	.news_top_r{
		height: 100%;
		margin-left: 20rpx;
		padding-top: 30rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}
	.list_news_info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		
	}
	/* 企业评价弹窗 */
	.cu-dialog{
		width:570rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	.cu-item-title{
		font-size: 32rpx;
	}
	
	.cu-item-title1{
		width: 100%;
		font-size: 32rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.action1 image{
		width: 29rpx;
		height: 29rpx;

	}
	
	.cu_title{
		width:100%;
		height:80rpx;
		padding: 0rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #F5F5F5;
		
	}
	.button{
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cu_btn{
		width: 250rpx;
		height: 60rpx;
		background: #FFDD47;
		border-radius: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.padding_xl{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
	.cu_start_box{
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cu_start_box image{
		width: 39rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}
	.cu_text_area{
		width: 509rpx;
		height: 140rpx;
		background: #F2F2F2;
		padding: 20rpx 20rpx;
	}
	.text_area_class{
		width: 100%;
		height: 100%;
		text-align: left;
		font-size: 26rpx;
	}
	.input_class{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.cu_close{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		bottom: 25%;
		right: 45%;
	}
	/* 暂无消息 */
	.none_msg {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 300rpx;
	}
	
	.none_msg image {
		width: 354rpx;
		height: 253rpx;
	}
	
	.none_title {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 40rpx;
	}
	
	
	
</style>
